<template>
    <div>
        <el-dialog title="添加与修改" :visible.sync="dialogFormVisible">
            <el-form :model="addForm"  ref="addForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类" prop="sn">
                    <el-input v-model="addForm.sn" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="okForm">确 定</el-button>
            </div>
        </el-dialog>

        <!--多表查询-->
        <el-col :span="24"  class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <!--双向绑定的查询字段-->
                    <el-input v-model="keywords" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <!--给按钮绑定事件请求方法-->
                    <el-button type="primary" v-on:click="getDetail">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-table :data="tableData" style="width: 100%" @selection-change="selsChange" @row-dblclick="rowDrawerClick">
            <!--显示多选框-->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="id" width="180">
            </el-table-column>
                <el-table-column prop="name" label="名称"  width="180" >
                </el-table-column>
            <el-table-column prop="sn" label="分类">
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--批量删除-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>



        <el-dialog title="添加与修改" :visible.sync="dialogForm">
            <el-form :model="addDetailForm"  ref="addDetailForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="addDetailForm.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="okForm2">确 定</el-button>
            </div>
        </el-dialog>
        <el-drawer
                title="我嵌套了表格!"
                :visible.sync="innerDrawer"
                direction="rtl"
                :append-to-body="true"
                :before-close="handleClose"
                size="50%">

            <el-button type="primary" @click="handleAdd2">新增</el-button>
            <el-table :data="gridData" highlight-current-row v-loading="listLoading" border @selection-change="selsChange2">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="id" align="center" sortable></el-table-column>
                <el-table-column prop="name" label="明细名" align="center" sortable></el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button size="small" @click="commodityEdit2(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="commodityDel2(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--批量删除-->
            <el-col :span="24" class="toolbar">
                <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange2" :page-size="pageSize" :total="total" style="float:right;">
                </el-pagination>
            </el-col>
        </el-drawer>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [],
                //当前页展示的条数
                currentPage: 1,
                //当前页
                pageSize: 10,
                //展示总条数
                total: 0,
                //高级查询字段名
                keywords:'',
                //分页参数
                sels:[],
                //新增界面是否显示
                dialogFormVisible: false,
                //新增界面数据初始化
                addForm: {
                    id :'',
                    name: '',
                    sn: ''
                },
                innerDrawer:false,
                gridData: [],
                listLoading: false,
                sels2:[],
                addDetailForm:{
                    id:'',
                    name:'',
                    types_id :''
                },
                dialogForm:false
            }
        },methods:{
            //明细表添加
            handleAdd2(){
                //清空缓存
                this.addDetailForm.name=''
                this.addDetailForm.id=''
                this.dialogForm = true
            },
            //明细表添加修改确认按钮
            okForm2(){
                this.$http.put("/systemdictionarydetail",this.addDetailForm).then(res=>{
                    //console.debug(res)
                    //关闭弹出框
                    this.dialogForm = false
                    //刷新列表
                    this.getDetail();
                }).catch(()=>{
                    this.$message("取消成功")
                })
            },
            //明细表修改
            commodityEdit2(inedx,row){
                console.debug(row)
                //数据回显
                for(var k in this.addDetailForm){
                    this.addDetailForm[k]=row[k]
                }
                this.dialogForm = true
            },
            //明细表删除
            commodityDel2(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.$http.delete("/systemdictionarydetail/"+row.id).then(res=>{
                        //解构表达式
                        let {success,msg} = res.data
                        if(success){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getDetail();
                        }
                    })
                }).catch(()=>{
                    this.$message("取消删除")
                })
            },
            //明细表选中复选框触发函数
            selsChange2(rows){
                this.sels2 = rows;
            },
           //明细表分页
            handleCurrentChange2(val){
                //重新修改页码
                this.currentPage = val;
                //重新加载列表
                this.getDetail();
            },
            //点击关闭
            handleClose(done){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
                },

            //双击显示内层抽屉
            rowDrawerClick(row) {
                // 每次子表打开，页码重新赋值为1
                this.currentPage = 1
                //每次子表打开，每页数据条数重新赋值为5条
                this.pageSize = 5
                // 品牌id赋值
                this.types_id = row.id
                this.addDetailForm.types_id = row.id
                //展示内层抽屉列表
                this.getDetail();
                //弹出内层抽屉
                this.innerDrawer = true
            },
            okForm(index,row){
                this.$http.put("/systemdictionarytype",this.addForm).then(res=>{
                    //console.debug(res)
                    //关闭弹出框
                    this.dialogFormVisible = false
                    //刷新列表
                    this.getTypeList();
                }).catch(()=>{
                    this.$message("取消成功")
                })
            },
            //页码发生改变的时候触发函数
            handleCurrentChange(val){
                //重新修改页码
                this.currentPage = val;
                //重新加载列表
                this.getTypeList();
            },
            //选中复选框触发函数
            selsChange(rows){
                this.sels = rows;
            },
            //高级查询
            getDetail(){

            },
            //添加
            handleAdd(){
                //清空缓存
                for(var k in this.addForm){
                    this.addForm[k]=''
                }
                this.dialogFormVisible = true
            },
            //修改
            handleEdit(index,row){
                //数据回显
                for(var k in this.addForm){
                    this.addForm[k]=row[k]
                }
                this.dialogFormVisible = true
            },
            //删除
            handleDel(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.$http.delete("/systemdictionarytype/"+row.id).then(res=>{
                        //解构表达式
                        let {success,msg} = res.data
                        if(success){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getTypeList();
                        }
                    })
                }).catch(()=>{
                    this.$message("取消删除")
                })
            },
            //批量删除
            batchRemove(index,row){
                this.$confirm('此操作将永久删除选中文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.$http.post("/systemdictionarytype/delList",this.sels).then(res=>{
                        //console.debug(sels)
                        //解构表达式
                        let {success,msg} = res.data
                        if(success){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getTypeList();
                        }
                    })
                }).catch(()=>{
                    this.$message("取消删除")
                })
            },
            getTypeList() {
                //分页传递参数
                let param = {
                    "keywords": this.keywords,
                    "currentPage": this.currentPage,
                    "pageSize": this.pageSize
                };
                this.$http.post("/systemdictionarytype",param).then(res => {
                    //console.debug(res)
                    let {data, totals} = res.data;
                     this.tableData = data;
                    this.total = totals;
                });
            },
            getDetail(){
                //分页传递参数
                let param = {
                    "keywords": this.keywords,
                    "types_id" : this.types_id,
                    "currentPage": this.currentPage,
                    "pageSize": this.pageSize
                };
                this.$http.post("/systemdictionarydetail",param).then(res => {
                    //console.debug(res)
                    let {data, totals} = res.data;
                    this.gridData = data;
                    this.total = totals;
                });
            }
        },
        mounted(){
            this.getTypeList();
        }
    }
</script>